<template>
  <el-form :class="formClass" ref="elForm" :model="modelValue" v-bind="elformProps">
    <jax-form-group :json="json" v-model="modelValue">
      <template v-for="slotName in Object.keys($slots)" v-slot:[slotName]="item">
        <slot :name="slotName" v-bind="item"></slot>
      </template>
    </jax-form-group>
  </el-form>
</template>

<script>
import JaxFormItem from './FormItem.vue'

export default {
  name: 'JaxForm',
  components: {
    JaxFormItem,
  },
  props: {
    // 表单数据v-model
    modelValue: null,

    // 表单结构
    json: {
      type: Array,
      required: true,
    },

    // 表单属性
    formProps: {
      type: Object,
      default: {},
    },

    // 间隔
    gutter: {
      type: Number,
      default: 15,
    },

    // 使用Flex布局
    flexLayout: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      elFormModel: {},
    }
  },
  computed: {
    elformProps() {
      return {
        'label-position': 'right',
        'label-width': '80px',
        ...this.formProps,
      }
    },
    elForm() {
      return this.$refs.elForm
    },
    validate() {
      return this.$refs.elForm.validate
    },
    formClass() {
      let formClass = {
        'jax-form': true,
      }
      if (this.flexLayout) formClass['jax-form-flex'] = true

      return formClass
    },
  },

  created() {},
  watch: {},
  methods: {
    /**
     * 把json中的多维数据提取成一维数据列表，并计算span大小
     */
    extractToList(data, span = 24) {
      let list = []

      data.map((item) => {
        if (Array.isArray(item)) {
          const newList = this.extractToList(item, 24 / item.length)
          list = list.concat(newList)
        } else {
          list.push({
            span,
            options: item,
          })
        }
      })

      return list
    },
  },
}
</script>

<style lang="scss" scoped></style>
